.search {
  width: 100%;
  background-color: rosybrown;
  padding: 10rpx;
  box-sizing: border-box;
  .search-content {
    display: flex;
    position: relative;
    .search-input {
      flex: 6;
      display: flex;
      height: 60rpx;
      background-color: seashell;
      box-sizing: border-box;
      align-items: center;
      icon {
        margin-left: 20rpx;
        margin-right: 10rpx;
      }
      input {
        flex: 1;
        font-size: 12px;
        height: 100%;
      }
    }
    .cancel {
      flex: 1;
      height: 60rpx;
      line-height: 60rpx;
      margin-left: 10rpx;
      font-size: 26rpx;
    }
    .search-modal {
      position: absolute;
      width: 100%;
      top: 70rpx;
      left: 0;
      background: rgb(167, 202, 182);
      overflow-y: auto;
      height: 500px;
      padding: 20rpx;
      .search-item {
        height: 60rpx;
        line-height: 60rpx;
        border-bottom: 1rpx solid rgb(241, 6, 6);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 26rpx;
      }
    }
  }
}
.history {
  display: flex;
  padding: 20rpx;
  justify-content: space-between;
  h4 {
    font-size: 32rpx;
  }
}
.history-list {
  display: flex;
  flex-wrap: wrap;
  .history-item {
    margin: 10rpx 10rpx;
    padding: 20rpx;
    border-radius: 5px;
    background-color: salmon;
    margin: 4px;
    font-size: 16px;
  }
}
// .history-list {
//   display: flex;
//   // padding: 20rpx 10rpx;
//   flex-wrap: wrap;
//   .history-item {
//     margin: 10rpx 10rpx;
//     padding: 20rpx;
//     background: #eee;
//   }
// }
